<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>协同平台</title>
  <link rel="stylesheet" href="layui-admin/layui/css/layui.css">
  <style type="text/css">
  /* .layui-side-scroll {
	    position: relative;
	    width: 220px;
	    height: 100%;
	    overflow-x: hidden;
	} */
	.parentElement{
	    display:flex;/*Flex布局*/
	    align-items:center;/*指定垂直居中*/
	}
	.site-demo-title {
	    position: fixed;
	    left: 200px;
	    right: 0;
	    top: 65px;
	}
  </style>
</head>
<body>
 
<!-- 你的HTML代码 -->
<div class="layui-layout layui-layout-admin">
	<div class="layui-header header header-demo parentElement">
		<div style="margin-left:45px;font-size: 20px;color: white">科华协同平台</div>
	</div>
	<!-- 导航栏 -->
	<div class="layui-side layui-bg-black" >
	<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" style="height:100%" lay-filter="nav">
	  <li class="layui-nav-item layui-nav-itemed">
	    <a href="javascript:;">默认展开</a>
	    <dl class="layui-nav-child">
	      <dd><a href="javascript:;" data-target-url="123456">选项一</a></dd>
	      <dd><a href="javascript:;" data-target-url="1234567">选项二</a></dd>
	      <dd><a href="javascript:;">选项三</a></dd>
	      <dd><a href="javascript:;">跳转项</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item">
	    <a href="javascript:;">解决方案</a>
	    <dl class="layui-nav-child">
	      <dd><a href="">移动模块</a></dd>
	      <dd><a href="">后台模版</a></dd>
	      <dd><a href="">电商平台</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item"><a href="">云市场</a></li>
	  <li class="layui-nav-item"><a href="">社区</a></li>
	</ul>
	 </div>
	 <!-- 内容区域 -->
	  <div class="layui-tab site-demo-title" lay-allowClose="true" lay-filter="tab">
		  <ul class="layui-tab-title">
		   <!--  <li class="layui-this">网站设置</li>
		    <li>用户基本管理</li>
		    <li>权限分配</li>
		    <li>全部历史商品管理文字长一点试试</li>
		    <li>订单管理</li> -->
		  </ul>
		  <div class="layui-tab-content">
		    <!-- <div class="layui-tab-item layui-show">1</div>
		    <div class="layui-tab-item">2</div>
		    <div class="layui-tab-item">3</div>
		    <div class="layui-tab-item">4</div>
		    <div class="layui-tab-item">5</div>
		    <div class="layui-tab-item">6</div> -->
		  </div>
		</div>
	</div>
 </div>
<script src="layui-admin/layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
/* layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}); */
layui.use(['layer','element',"jquery"], function(){
	  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
	  var $=layui.jquery;
	  //监听导航点击
	  var tabs=new Set();
	  element.on('nav(nav)', function(elem){
		var url= elem.find("a").data("target-url");
		var title=elem.text();
		
		if(!tabs.has(url)){
			$.ajax({
			    url: "loginController.do?home",
			    async: true,//同步方式发送请求，true为异步发送
			    type: "GET",
			    data: {},
			    success: function (result) {
				    	element.tabAdd('tab', {
				        title: title //用于演示
				        ,content: result
				        ,id: url //实际使用一般是规定好的id，这里以时间戳模拟下
					});
				    	element.tabChange('tab', url);
			 	},
			    error:function(XMLHttpRequest, textStatus, errorThrown) {
			     	element.tabAdd('tab', {
				        title: title //用于演示
				        ,content: XMLHttpRequest.status
				        ,id: url //实际使用一般是规定好的id，这里以时间戳模拟下
					});
			     	element.tabChange('tab', url);
			    }
			 });
		}
		tabs.add(url);
		 //切换到：用户管理
	    //layer.msg();
	  });
	});
</script> 
</body>
</html>